<template>
  <view :data-theme="theme">
    <view class="header borderPad header-box">
      <text class="title">话题</text>
      <text class="iconfont icon-guanbi5" @click="close"></text>
    </view>
    <view class='search acea-row row-between-wrapper'>
      <view class='input acea-row row-middle'>
        <text class='iconfont icon-sousuo2'></text>
        <input class="placeholder" type='text' :value='searchValue' :focus="focus" placeholder='点击搜索话题'
               placeholder-class='placeholder' @input="setValue" @confirm="searchBut" maxlength="20"></input>
      </view>
      <view class='bnt' @tap='searchBut'>搜索</view>
    </view>
    <view class="topic-recommend">
      <view class="topic-title acea-row row-middle">
        <text class="dian mr10"></text>
        推荐话题
      </view>
      <view class="list acea-row">
        <view v-for="item in topicRecommendList" :key="item.id" :class="item.isChoose ? 'active' : ''"
              @click="onCheck(item)" class="item borderPad mr20 mb30">
          <text
              :class="item.isChoose ? 'font-color' : ''" class="icon">#
          </text>
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="topic-recommend">
      <view class="topic-title mt10 acea-row row-middle">
        <text class="dian mr10"></text>
        全部话题
      </view>
      <view class="list acea-row" style="border: none;">
        <view v-for="item in topicList" :key="item.id" @click="onCheck(item)"
              :class="item.isChoose ? 'active' : ''" class="item borderPad mr20 mb30">
          <text class="icon" :class="item.isChoose ? 'font-color' : ''">#</text>
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="foot_bar">
      <button class="confirm_btn" @click="submit">确定({{ topicSelectedList.length }}/5)</button>
    </view>
  </view>
</template>

<script>
import {
  mapGetters
} from "vuex";
import {
  topicListApi,
  topicRecommendListApi,
} from '@/api/discover.js';

let app = getApp();
export default {
  computed: mapGetters(['discoverTopic']),
  data() {
    return {
      focus: false,
      searchValue: '',
      theme: app.globalData.theme,
      where: {
        page: 1,
        limit: 30,
        keywords: '',
      },
      loaded: false,
      loading: false,
      topicList: [], //全部
      topicRecommendList: [], //推荐
      topicSelectedList: [] //选中
    }
  },
  mounted() {
    this.topicSelectedList = [...this.discoverTopic];
    this.getTopicList();
    this.getTopicRecommendList();
  },
  onReachBottom() {
    this.getTopicList();
  },
  methods: {
    close() {
      this.$emit('onClose');
    },
    /*获取初始化选中的数据*/
    getInitchecked(arr) {
      let that = this;
      arr.forEach((item, index) => {
        that.$set(item, 'check', false);
        that.topicSelectedList.forEach((val, i) => {
          if ((item.id == val.id)) {
            that.$set(item, 'isChoose', true);
          }
        })
      })
    },
    searchBut() {
      this.focus = false;
      this.where.page = 1;
      this.loaded = false;
      this.loading = false;
      this.topicList = [];
      this.getTopicList();
    },
    //搜索
    onBlur() {
    },
    setValue: function (event) {
      this.$set(this, 'searchValue', event.detail.value);
    },
    /*确定提交*/
    submit() {
      this.$store.commit('DiscoverTopic', this.topicSelectedList);
      this.$emit('onClose', this.topicSelectedList)
    },
    //点击
    onCheck(item) {
      if (this.topicSelectedList.length > 4 && !item.isChoose) {
        return;
      }
      let list = [...this.topicRecommendList, ...this.topicList]
      list.forEach((val, i) => {
        if ((val.id == item.id)) {
          this.$set(val, 'isChoose', !val.isChoose);
        }
      })
      if (item.isChoose) {
        this.topicSelectedList.push(item)
      } else {
        this.topicSelectedList.splice(this.topicSelectedList.findIndex(itemn => ((itemn.id == item.id))), 1)
      }
    },
    //全部
    getTopicList() {
      if (this.loading || this.loaded) return;
      this.loading = true;
      this.where.keywords = encodeURIComponent(this.searchValue);
      topicListApi(this.where).then(
          res => {
            this.loadingb = false;
            this.loaded = res.data.list.length < this.where.limit;
            this.topicList.push.apply(this.topicList, res.data.list);
            this.where.page = this.where.page + 1;
            this.topicList.forEach((item, index) => {
              this.$set(item, 'isChoose', false);
            })
            this.getInitchecked(this.topicList);
          },
          error => {
            this.$util.Tips({
              title: error.message
            })
          }
      );
    },
    //推荐
    getTopicRecommendList() {
      topicRecommendListApi().then(
          res => {
            this.topicRecommendList = res.data;
            this.topicRecommendList.forEach((item, index) => {
              this.$set(item, 'isChoose', false);
            })
            this.getInitchecked(this.topicRecommendList);
          },
          error => {
            this.$util.Tips({
              title: error.message
            })
          }
      );
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  position: relative;
  text-align: center;
  margin-bottom: 30rpx;
  margin-top: 30rpx;

  .title {
    color: #282828;
    font-size: 36rpx;
    font-weight: bold;
  }

  .iconfont {
    color: #8A8A8A;
    font-size: 28rpx;
    position: absolute;
    top: 4rpx;
    right: 24rpx;
  }
}

.foot_bar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
  padding: 20rpx 0;
  z-index: 5;

  .confirm_btn {
    width: 710rpx;
    height: 86rpx;
    line-height: 84rpx;
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
    @include main_bg_color(theme);
    border-radius: 43rpx;
    margin: 0 auto;
  }
}

.topic {
  &-recommend {
    padding: 30rpx 0 0 30rpx;

    .dian {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      opacity: 1;
      @include main_bg_color(theme);
    }

    .list {
      border-bottom: 1px solid #EEEEEE;
      padding-bottom: 20rpx;

      .active {
        @include cate-two-btn(theme);
        @include main_color(theme);
        border: none;
      }
    }

    .item {
      height: 62rpx;
      line-height: 59rpx;
      border-radius: 31rpx;
      border: 1px solid #CCCCCC;
      color: #282828;
      font-size: 24rpx;

      .icon {
        color: #999999;
        margin-right: 6rpx;
      }
    }

    .item:nth-last-child(1) {
      margin-right: 0;
    }
  }

  &-title {
    font-weight: 600;
    color: #282828;
    font-size: 30rpx;
    margin-bottom: 30rpx;
  }
}

.search {
  padding: 0 24rpx 18rpx 30rpx;
  background-color: #fff !important;

  .input {
    width: 610rpx;
    background-color: #f7f7f7;
    border-radius: 33rpx;
    padding: 0 35rpx;
    box-sizing: border-box;
    height: 66rpx;

    input {
      width: 472rpx;
      font-size: 26rpx;
    }

    .placeholder {
      color: #bbb;
    }

    .iconfont {
      color: #000;
      font-size: 35rpx;
    }
  }

  .bnt {
    text-align: center;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 30rpx;
    color: #282828;
  }
}

.header-box {
  height: 50rpx;
  line-height: 50rpx;
}

.placeholder {
  margin-left: 16rpx;
}
</style>
